<script lang="ts">
  import * as d3 from "d3";

  export let width = 640;
  export let height = 400;
  export let marginTop = 20;
  export let marginRight = 20;
  export let marginBottom = 20;
  export let marginLeft = 20;
  
  $: data = d3.ticks(-2, 2, 200).map(Math.sin);
  $: x = d3.scaleLinear(
    [0, data.length - 1],
    [marginLeft, width - marginRight]
  );
  // @ts-expect-error
  $: y = d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]);
  $: line = d3.line((d, i) => x(i), y);

  function onMousemove(event: MouseEvent) {
    const [x, y] = d3.pointer(event);
    data = data.slice(-200).concat(Math.atan2(x, y));
  }
</script>

<!-- svelte-ignore a11y_no_static_element_interactions -->
<svg {width} {height} on:mousemove={onMousemove}>
  <path fill="none" stroke="currentColor" stroke-width="1.5" d={line(data)} />
  <g fill="white" stroke="currentColor" stroke-width="1.5">
    {#each data as d, i}
      {#key i}
        <circle cx={x(i)} cy={y(d)} r="2.5" />
      {/key}
    {/each}
  </g>
</svg>
